<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="card-title">
        <span>产品管理</span>
      </div>
      <div class="product-box">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          :header-cell-style="{ background: '#e1e4e5' }"
        >
          <el-table-column prop="id" label="序号"> </el-table-column>
          <el-table-column prop="proNum" label="产品编号"> </el-table-column>
          <el-table-column prop="productName" label="产品名称">
          </el-table-column>
          <el-table-column prop="minLimit" label="最小期(月)">
          </el-table-column>
          <el-table-column prop="maxLimit" label="最大期(月)">
          </el-table-column>
          <el-table-column prop="earning" label="利率类型"> </el-table-column>
          <el-table-column prop="ReturnMoney" label="回款方式" width="110px">
          </el-table-column>
          <el-table-column
            prop="proLowerInvest"
            label="起投金额(元)"
            width="110px"
          >
          </el-table-column>
          <el-table-column prop="status" label="状态" :formatter="stateFormat">
          </el-table-column>
          <el-table-column label="管理">
            <el-button disabled type="primary" size="mini">管理</el-button>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    ...mapActions({ getproList: "invest/getProductList" }),
    stateFormat(row) {
      if (row.status === 0) {
        return "关闭";
      } else {
        return "正常";
      }
    },
  },
  created() {
    this.getproList().then((data) => {
      if (data) {
        this.tableData = data;
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .card-title {
    font-size: 22px;
  }
}
</style>